<template>
    <div class="buy-list">
        <form action="/">
        <van-nav-bar :fixed="true" title="Tolymoly" @click-left="$router.back(-1)" style="color:#fff;">
            <van-search
                :placeholder="$t('m.SearchinShopGoGo')"
                slot="title"
                v-model="searchTerm"
                @focus="toSearch"
                style="display: inline-block;width:100%;"
                background="#f90"
            />
            <!--<van-icon name="search" slot="right" @click="toSearch"/>-->
            <!--<van-icon name="chat" slot="right" />-->
        </van-nav-bar>
        </form>
        <div style="padding-top:46px"></div>
        <div class="list-title-bar" ref="headerBox" :style="opacityStyle">
            <van-row class="tabbar-box">
                <van-col span="8" class="tabbar" @click.native="townshipModalShow = !townshipModalShow">
                    <span v-if="townshipIdForTitle" class="title-text font-color">{{getTownshipType(townshipIdForTitle)}}</span>
                    <span v-else-if="regionIdForTitle" class="title-text font-color">{{getRegionTypeStr(regionIdForTitle)}}</span>
                    <span class="title-text" v-else>{{$t('m.Location')}}</span>
                    <span class="san-box"></span>
                </van-col>
                <van-col span="8" class="tabbar" @click.native="getFirstCategory()">
                    <span v-if="this.categoryId" class="title-text font-color">{{getCategoryText()}}</span><!--加载太慢，暂时用下面的category-->
                    <!--<span v-if="this.category" class="title-text font-color">{{category}}</span>&lt;!&ndash;加载太慢，暂时用下面的category&ndash;&gt;-->
                    <span class="title-text" v-else>{{$t('m.Category')}}</span>
                    <span class="san-box"></span>
                </van-col>
                <van-col span="8" class="tabbar" @click.native="filterShow = !filterShow">
                    <span class="title-text" :class="{'font-color': hasFilter }">{{$t('m.Filter')}}</span>
                    <!--<span>{{$t('m.Filter')}}</span>-->
                    <span class="san-box"></span>
                </van-col>
            </van-row>
            <div v-show="subCategoryShow">
                <div class="child-category-box">
                    <div class="child-box">
                        <div class="cate-btn" v-for="(item, index) in subCategoryJson" :key="index" @click="goToGetList(item)" :class="{'active': item.id == categoryBtnObject }">{{item.name}}</div>
                    </div>
                </div>
            </div>
            <div v-show="thirdCategoryShow">
                <div class="child-category-box third">
                    <div class="child-box">
                        <div class="cate-btn" v-for="(item, index) in thirdCategoryJson" :key="index" @click="goToGetList(item)" :class="{'active': item.id == categoryThirdBtnObject }">{{item.name}}</div>
                    </div>
                </div>
            </div>
        </div>
        <!--<div v-show="subCategoryShow || thirdCategoryShow" style="padding-top:40px"></div>-->
        <!--<div style="padding-top:32px"></div>-->

        <!--<van-pull-refresh v-model="isLoading" @refresh="onRefresh">-->
            <van-list
                v-model="loading"
                :finished="finished"
                loading-text=" "
                @load="getList"
                class="main-explore buy-list-explore">
                <div class="explore-item" @click="goToDetail(item.id)" v-for="(item, index) in tableData" :key="index"  v-bind:class="[tableData.length % 2 == 0 ? twoClass : oneClass]">
                    <div class="explore-item-icon">
                        <!--<img :src="item.cover" :style="defaultImage" alt=""/>-->
                        <img v-lazy="item.cover" alt="" :key="item.cover" :onload="getWidthAndHeight(item, index)" :class="[item.wth == 1 ? 'width-max' : 'height-max']"/>
                    </div>
                    <!--<div class="explore-item-icon explore-item-icon1" v-else>-->
                        <!--<img :style="defaultImage" alt=""/>-->
                    <!--</div>-->
                    <div class="explore-item-label">{{translateString(item.title)}}</div>
                    <span>
                        <div class="explore-item-label price" v-if="item.priceType == 2">Lks&nbsp;{{regexNum(item.price)}}</div>
                        <div class="explore-item-label price" v-else>Ks&nbsp;{{regexNum(item.price)}}</div>
                    </span>
                    <!--<div class="explore-item-label dates">{{getDateDiff(item.createDatetime)}}</div>-->
                </div>
            </van-list>
            <div v-if="finished && !changeSelectLoading" class="no-more">{{$t('m.Nomore')}}~</div>
            <div v-if="changeSelectLoading" class="main-explore buy-list-explore van-list">
                <div class="van-list__loading">
                    <van-loading size="16px" />
                    <!--<span class="van-list__loading-text">Loading</span>-->
                </div>
            </div>

        <!--</van-pull-refresh>-->
        <!--Location popup-->
        <van-popup class="modal" v-model="townshipModalShow" position="right" :overlay="false">
            <van-nav-bar
                :title="$t('m.Location')"
                class="filter-title"
                left-arrow
                @click-left="townshipModalShow = false"
            />
            <van-tree-select
                :items="items"
                :main-active-index="mainActiveIndex"
                :active-id="getNumberTownshipId()"
                @navclick="onNavClick"
                @itemclick="onItemClick"
                class="location-tree-select"
            />
            <div class="submit-btn">
                <van-button size="large" class="btn" @click="modalSubmit">{{$t('m.Search')}}</van-button>
            </div>
        </van-popup>
        <!--Catagroy popup-->
        <van-popup class="modal" v-model="categoryShow" position="right" :overlay="false">
            <div class="page-category">
                <van-nav-bar
                    :title="$t('m.Category')"
                    class="filter-title"
                    left-arrow
                    @click-left="categoryShow = false"
                />
                <div v-show="categoryLoading1" class="main-explore buy-list-explore van-list">
                    <div class="van-list__loading">
                        <van-loading size="16px" />
                        <!--<span class="van-list__loading-text">Loading</span>-->
                    </div>
                </div>
                <van-list>
                    <van-cell v-for="item in categoryJson" :key="item.id" :title="item.name + ''" :class="{'text-active': item.id == classObject }"
                              @click="getSecondCategory(item)"/>
                </van-list>
            </div>
        </van-popup>
        <van-popup class="modal" v-model="categoryPop2Show" position="right" :overlay="false">
            <div class="page-sub-category">
                <van-nav-bar
                :title="category1"
                class="filter-title"
                left-arrow
                @click-left="categoryBack"
                />
                <van-collapse v-model="activeNames" accordion>
                    <div  v-for="item in categoryPop2Json" class="category-sec">
                        <van-collapse-item :title="item.name" :name="item.id"
                                           :key="item.id" @click.native="getThirdCategory(item)" :class="{'active': item.id == categoryBtnObject }">
                            <span v-for="i in categoryPop3Json">
                                <van-button style="margin: 0 8px 8px 0;" type="default" size="normal"
                                             :key="i.id" @click="goToGetList(i)" :class="{'active': i.id == categoryThirdBtnObject }">
                                {{i.name}}
                                </van-button>
                            </span>
                        </van-collapse-item>
                    </div>

                </van-collapse>

            </div>
        </van-popup>
        <!--Filter popup-->
        <van-popup class="modal" v-model="filterShow" position="right" :overlay="false">
            <van-nav-bar
                :title="$t('m.Filter')"
                left-arrow
                @click-left="filterShow = false"
                class="filter-title"
            />
            <van-collapse v-model="filterActiveNames" accordion>
                <van-collapse-item name="1">
                    <div slot="title">{{$t('m.Sortby')}}<span class="filter-right-title">{{getSortBySelectText(sortBy)}}</span></div>
                    <div v-for="item in SortbyList" class="filter-child-list" @click="setSortBy(item)" :class="[sortBy == item.value ? 'activeClass' : '']">{{item.text}}</div>
                </van-collapse-item>
                <van-collapse-item name="2">
                    <div slot="title">{{$t('m.Itemcondition')}}<span class="filter-right-title">{{getConditionSelectText(itemCondition)}}</span></div>
                    <div v-for="item in conditionList" class="filter-child-list" @click="setCondition(item)" :class="[itemCondition == item.value ? 'activeClass' : '']">{{item.text}}</div>
                </van-collapse-item>

                <van-cell-group v-if="otherPropertyJson.length > 0" v-for="(item, index) in otherPropertyJson"  :key="index">
                    <van-cell :title="item.name" v-if="item.id != 51" is-link class="property-cell" :value="propertyText(propertiesSub[index], item)" @click="showPropertyType(item, index)" />
                    <van-field v-else v-model="brandSubmit" :label="item.name" placeholder="" /><!--Brand 输入框-->
                </van-cell-group>
                <!--otherPropertyJson 的popup-->
                <van-popup class="modal" v-model="propertyShow" position="right" :overlay="false">
                    <van-nav-bar
                        :title="property.name"
                        left-arrow
                        @click-left="propertyShow= false"
                        class="filter-title"
                    />
                    <van-checkbox-group v-model="resultItems">
                        <van-cell-group style="margin-bottom: 100px;">
                            <van-cell
                                v-for="(item, index) in property.values"
                                clickable
                                :key="item.id"
                                :title="item.text"
                                @click="toggle(index)"
                            >
                                <van-checkbox :name="item.id" ref="checkboxes" />
                            </van-cell>
                        </van-cell-group>
                    </van-checkbox-group>
                </van-popup>
                <!--fixed 样式bug -- 将btn放在 popup外面-->
                <div class="filter-btn popup-filter-btn" v-show="propertyShow">
                    <van-button type="default" class="reset-btn" @click="resetProperty">Reset</van-button>
                    <van-button type="default" class="apply-btn" @click="applyProperty">Apply</van-button>
                </div>
                <!--otherPropertyJson 的popup-->

                <div class="price-box" :class="[otherPropertyJson.length <= 0 ? 'border-t' : '']">
                    <span style="padding-right:10px;line-height:24px;">{{$t('m.Price')}}(Ks)</span>
                    <input class="price-input" v-model="priceMinValue" @input="setPriceError(priceMinValue, 0)" v-bind:class="{'text-danger': inputErrorMin }" :maxlength="10" placeholder="Min" type="text">
                    <span style="padding:0 6px;line-height:24px;">-</span>
                    <input class="price-input" v-model="priceMaxValue" @input="setPriceError(priceMaxValue, 1)" v-bind:class="{'text-danger': inputErrorMax }" :maxlength="10" placeholder="Max" type="text">
                    <van-button slot="button" size="small" type="default" @click="filter.priceType = filter.priceType == 1 ? 2
                    : 1">{{filter.priceType == 1 ? $t('m.Kyat') : $t('m.Lakh') }}
                    </van-button>
                </div>
            </van-collapse>
            <div class="filter-btn" v-show="isOriginHei">
                <van-button type="default" class="reset-btn" @click="resetFilter">{{$t('m.Reset')}}</van-button>
                <van-button type="default" class="apply-btn" @click="applyFilter">{{$t('m.Apply')}}</van-button>
            </div>
        </van-popup>

        <div style="padding:40px;"></div>
        <footer-bar ref="footer" footerBar="search"></footer-bar>
        <!--<div class="to-sell" @click="gotToSell()">-->
            <!--<div v-if="this.$store.state.store.localLang == 'US'" style="height: 60px;line-height: 60px;">{{$t('m.Sell')}}</div>-->
            <!--<div v-else>{{$t('m.Sell')}}</div>-->
        <!--</div>-->
    </div>
</template>
<script>
    import {searchBuyList, getFirstCategoryData} from '../static/api/mgc_api'
    import Qs from 'qs'
    import FooterBar from '@/components/FooterBar'
    // 英文翻译
    import township from '../static/json/township'
    import region from '../static/json/region'
    import categoryJson from '../static/json/category'
    // 缅文
    import mm_region from '../static/mmJson/region'
    import mm_township from '../static/mmJson/township'
    import mm_categoryJson from '../static/mmJson/category'
    // 缅文Unicode
    import mmu_region from '../static/mmUnicodeJson/region'
    import mmu_township from '../static/mmUnicodeJson/township'
    import mmu_categoryJson from '../static/mmUnicodeJson/category'

    export default {
        name: 'buyList',
        components: {
            FooterBar
        },
        data() {
            return {
                defaultImage: {
                    backgroundImage: "url(" + require("../static/img/images/default-list.png") + ")",
                    backgroundRepeat: "no-repeat",
                    backgroundSize: "100% 100%",
                },
                oneClass: 'one',
                twoClass: 'two',
                search: '', //搜索表单提交字段
                isLoading: false,
                loading: false,
                categoryLoading1: false,
                changeSelectLoading: false,
                finished: false,
                isOriginHei: true,
                filterActiveNames: '',
                screenHeight: document.body.clientHeight, // 这里是给到了一个默认值 （这个很重要），
                originHeight: document.body.clientHeight, //默认高度在watch里拿来做比较

                tableData: [],
                pageData: {
                    pageNum: 1,
                    pageSize: 10,
                },
                pageInfo: {
                    totalCount: 0,
                    totalPages: 0
                },

                townshipModalShow: false,
                items: [],
                mainActiveIndex: 0,
                townshipIdForTitle: null,
                regionIdForTitle: null,
                regionId: null, //表单提交字段
                townshipId: null, //表单提交字段

                categoryShow: false,
                subCategoryShow: false,
                categoryPop2Show: false,
                thirdCategoryShow: false,
                categoryPop3Show: false,
                categoryJson: [],
                subCategoryJson: [],
                categoryPop2Json: [],
                thirdCategoryJson: [],
                categoryPop3Json: [],
                categoryId: null,
                category: '',
                category1: '',// 第一级选择时作为中间层
                activeNames: '1',
                otherForm:{},
                otherPropertyJson: [],
                isAddCategoryAllBtn: false,


                filterShow: false,
                sortBy: 'create_datetime desc', //filter表单提交值
                // sortBySelectText: '',
                itemCondition: null, //filter表单提交值
                conditionSelectText: '',

                propertyShow: false,
                property: '',
                resultItems: [], //resultItems为单个属性id集合
                countType: 0,
                properties: [],//properties 附加属性有多个， resultItems为单个属性id集合，properties为所有resultItems集合， 某个resultItem为空时，properties对应的index数组也为null
                propertiesSub: [],//filter表单提交值
                brandSubmit: '', // 附加属性为Brand时 brand为输入框

                priceMinValue: null, //filter表单提交值
                priceMaxValue: null, //filter表单提交值
                inputErrorMin: false,
                inputErrorMax: false,
                filter: {
                    sort: 'create_datetime desc',
                    condition: null,
                    properties: [],
                    priceFloor: null,
                    priceCeiling: null,
                    brand: '',
                    priceType: 1,   // 1: kyat 2: lakh
                },

                // search 新增
                searchTerm: '',
                user: '',
                brand: '',
                // 头部渐隐效果新增
                opacityStyle: {
                    opacity: 1
                },
                hasFilter: false,
            };
        },
        computed: {
            regionJson(){
                if(this.$store.state.store.localLang == 'MM'){
                    return mm_region
                } else if (this.$store.state.store.localLang == 'MMU'){
                    return mmu_region
                } else {
                    return region
                }
            },
            townshipJson(){
                if(this.$store.state.store.localLang == 'MM'){
                    return mm_township
                } else if (this.$store.state.store.localLang == 'MMU'){
                    return mmu_township
                } else {
                    return township
                }
            },
            categoryJsons(){
                if(this.$store.state.store.localLang == 'MM'){
                    return mm_categoryJson
                } else if (this.$store.state.store.localLang == 'MMU'){
                    return mmu_categoryJson
                } else {
                    return categoryJson
                }
            },
            SortbyList (){
                if(this.$store.state.store.localLang == 'MM'){
                    return [
                        {text: 'အသစ္ဆံုးေျကာ္ျငာ ပထမ', value: 'create_datetime desc'},
                        {text: 'ေစ်းႏႈန္း(နည္း မွ မ်ား)', value: 'sortPrice asc'},
                        {text: 'ေစ်းႏႈန္း(မ်ား မွ နည္း)', value: 'sortPrice desc'},
                    ]
                } else if (this.$store.state.store.localLang == 'MMU'){
                    return [
                        {text: 'အသစ်ဆုံးကြော်ငြာ ပထမ', value: 'create_datetime desc'},
                        {text: 'စျေးနှုန်း(နည်း မှ များ)', value: 'sortPrice asc'},
                        {text: 'စျေးနှုန်း(များ မှ နည်း)', value: 'sortPrice desc'},
                    ]
                } else {
                    return [
                        {text: 'Newest first', value: 'create_datetime desc'},
                        {text: 'Price (Low to High)', value: 'sortPrice asc'},
                        {text: 'Price (High to Low)', value: 'sortPrice desc'},
                    ]
                }
            },
            conditionList (){
                if(this.$store.state.store.localLang == 'MM'){
                    return [
                        {text: 'အားလံုး', value: 2},//不传
                        {text: 'အသစ္', value: 0},
                        {text: 'အသံုးျပဳျပီးသား', value: 1},
                    ]
                } else if (this.$store.state.store.localLang == 'MMU'){
                    return [
                        {text: 'အားလုံး', value: 2},//不传
                        {text: 'အသစ်', value: 0},
                        {text: 'အသုံးပြုပြီးသား', value: 1},
                    ]
                } else {
                    return [
                        {text: 'All', value: 2},//不传
                        {text: 'New', value: 0},
                        {text: 'Used', value: 1},
                    ]
                }
            },
            classObject() {
                let obj = this.categoryJson
                for (let i = 0; i < obj.length; i++) {
                    if (this.categoryId == obj[i].id) {
                        return obj[i].id
                    } else {
                        if (obj[i].children) {
                            for (let j = 0; j < obj[i].children.length; j++) {
                                if (this.categoryId == obj[i].children[j].id) {
                                    return obj[i].id
                                } else {
                                    if (obj[i].children[j].children) {
                                        for (let k = 0; k < obj[i].children[j].children.length; k++) {
                                            if (this.categoryId == obj[i].children[j].children[k].id) {
                                                return obj[i].id
                                            }
                                        }
                                    }
                                }
                            }
                        }

                    }
                }
            },
            categoryBtnObject() {
                //category样式变更新增
                let obj = this.subCategoryJson
                for (let i = 0; i < obj.length; i++) {
                    if (this.categoryId == obj[i].id) {
                        return obj[i].id
                    } else {
                        if (obj[i].children) {
                            for (let j = 0; j < obj[i].children.length; j++) {
                                if (this.categoryId == obj[i].children[j].id) {
                                    return obj[i].id
                                }
                            }
                        }

                    }
                }
            },
            categoryThirdBtnObject() {
                //category样式变更新增
                let obj = this.thirdCategoryJson
                for (let i = 0; i < obj.length; i++) {
                    if (this.categoryId == obj[i].id) {
                        return obj[i].id
                    }
                }
            },
        },
        methods: {
            initDataToGetList() {
                this.regionId = this.$route.query.regionId || ''
                this.regionIdForTitle = this.$route.query.regionId || ''
                this.townshipId = this.$route.query.townshipId || ''
                this.townshipIdForTitle = this.$route.query.townshipId || ''
                if (this.$route.query.filter) {
                    this.filter = JSON.parse(this.$route.query.filter)

                    // 如果有选中的就给filter文字设置颜色 start
                    this.hasFilter = false
                    for(let key in this.filter){
                        switch(key)
                        {
                            case 'sort':
                                if(this.filter[key]!='create_datetime desc' && this.filter[key]){
                                    this.hasFilter = true
                                    // console.log(this.hasFilter = true,'1')
                                }
                                break;
                            case 'brand':
                                if(this.filter[key]!=''){
                                    this.hasFilter = true
                                    // console.log(this.hasFilter = true,'2')
                                }
                                break;
                            case 'condition':
                                if(this.filter[key]!=null){
                                    this.hasFilter = true
                                    console.log(this.filter[key])
                                    // console.log(this.hasFilter = true,'3')
                                }
                                break;
                            case 'priceCeiling':
                                if(this.filter[key]!=''){
                                    this.hasFilter = true
                                    // console.log(this.hasFilter = true,'4')
                                }
                                break;
                            case 'priceFloor':
                                if(this.filter[key]!=''){
                                    this.hasFilter = true
                                    // console.log(this.hasFilter = true,'5')
                                }
                                break;
                            case 'priceType':
                                if(this.filter[key]!=1){
                                    this.hasFilter = true
                                    // console.log(this.hasFilter = true,'6')
                                }
                                break;
                            case 'properties':
                                if(this.filter[key]!=[] &&  this.filter[key].length > 0){
                                    for(let i=0; i<this.filter[key].length; i++){
                                        if (this.filter[key][i]!=[] &&  this.filter[key][i].length > 0){
                                            this.hasFilter = true
                                            // console.log(this.filter[key].length,'this.filter[key].length')
                                            // console.log(this.hasFilter = true,'7')
                                            break
                                        }
                                    }
                                }
                                break;
                            default:
                                break;
                        }
                        // if (key == 'sort'){
                        //     if(this.filter[key]!='create_datetime desc' && this.filter[key]) {
                        //         console.log(111)
                        //         this.hasFilter = true
                        //         break;
                        //     }
                        // } else if (key == 'priceType' && this.filter[key]!= '1'){
                        //     this.hasFilter = true
                        //     break;
                        // } else if (this.filter[key] && this.filter[key]!='' && this.filter[key]!= []){
                        //     console.log(this.filter[key],'333')
                        //     this.hasFilter = true
                        //     break;
                        // } else {
                        //     this.hasFilter = false
                        // }
                    }
                    // 如果有选中的就给filter文字设置颜色 end

                    this.sortBy = this.filter.sort
                    this.itemCondition = this.filter.condition
                    if (this.filter.properties) {
                        this.propertiesSub = this.filter.properties
                        this.properties = this.filter.properties
                    }
                    if (this.filter.priceType == 2) {
                        if (this.filter.priceFloor != '') {
                            this.priceMinValue = Math.round(Number(this.filter.priceFloor) / 100000).toString()
                        } else {
                            this.priceMinValue = ''
                        }
                        if (this.filter.priceCeiling != '') {
                            this.priceMaxValue = Math.round(Number(this.filter.priceCeiling) / 100000).toString()
                        } else {
                            this.priceMaxValue = ''
                        }
                    } else {
                        this.priceMinValue = this.filter.priceFloor || ''
                        this.priceMaxValue = this.filter.priceCeiling || ''
                    }
                    this.brandSubmit = this.filter.brand || ''
                } else {
                    this.sortBy = 'create_datetime desc'
                    this.itemCondition = null
                    this.propertiesSub = []
                    this.properties = []
                    this.priceMinValue = ''
                    this.priceMaxValue = ''
                    this.brandSubmit = ''
                    this.filter ={
                        sort: 'create_datetime desc',
                        condition: null,
                        properties: [],
                        priceFloor: null,
                        priceCeiling: null,
                        brand: '',
                        priceType: 1,
                    }
                }

                // search 新增
                this.categoryId = this.$route.query.categoryId || ''
                this.onOtherProperty(this.categoryId)

                this.category = this.$route.query.category || ''
                this.searchTerm = this.$route.query.searchTerm || ''
                this.brand = this.$route.query.brand || ''
                this.user = this.$route.query.user || ''
            },
            changePathToGetList(obj) {
                let path = this.$route.fullPath;
                this.$router.push({
                    path:path,
                    query:obj,
                })
            },
            //location选项 方法 start
            getRegionType() {
                // 导入地区选择的json
                let regionArr = [];

                let r = 0;
                for (let i = 0; i < this.regionJson.length; i++) {
                    let townshipArr = [];
                    let k = 0;
                    for (let j = 0; j < this.townshipJson.length; j++) {
                        if (this.regionJson[i].value == this.townshipJson[j].regionId) {
                            if (k == 0) {
                                if(this.$store.state.store.localLang == 'MM'){
                                    townshipArr.push({
                                        text: 'အားလံုး',
                                        regionId: this.regionJson[i].value,
                                        id: null,
                                    })
                                } else if (this.$store.state.store.localLang == 'MMU'){
                                    townshipArr.push({
                                        text: 'အားလုံး',
                                        regionId: this.regionJson[i].value,
                                        id: null,
                                    })
                                } else {
                                    townshipArr.push({
                                        text: 'All',
                                        regionId: this.regionJson[i].value,
                                        id: null,
                                    })
                                }
                                k = k + 1
                            }
                            townshipArr.push({
                                text: this.townshipJson[j].text,
                                regionId: this.regionJson[i].value,
                                id: this.townshipJson[j].value,
                            })
                        }
                    }
                    if (r == 0) {
                        if(this.$store.state.store.localLang == 'MM'){
                            regionArr.push({
                                text: 'အားလံုး',
                                id: null,
                            })
                        } else if (this.$store.state.store.localLang == 'MMU'){
                            regionArr.push({
                                text: 'အားလုံး',
                                id: null,
                            })
                        } else {
                            regionArr.push({
                                text: 'All',
                                id: null,
                            })
                        }
                        r = r + 1
                    }
                    regionArr.push({
                        text: this.regionJson[i].text,
                        id: this.regionJson[i].value,
                        children: townshipArr,
                    })

                    if (this.regionId == this.regionJson[i].value ) {
                        this.mainActiveIndex = i + 1
                    }
                }

                this.items = regionArr;
            },
            getTownshipType (t) {
                let str = ''
                this.townshipJson.forEach((item) => {
                    if (item.value == t) {
                        str = item.text || ''
                    }
                })
                return str
            },
            getRegionTypeStr(t) {
                let str = ''
                this.regionJson.forEach((item) => {
                    if (item.value == t) {
                        str = item.text || ''
                    }
                })
                return str
            },
            getNumberTownshipId() {
                if (this.townshipId != null && this.townshipId != '') {
                    return Number(this.townshipId)
                } else {
                    return null
                }
            },
            onNavClick(index) {
                this.townshipId = null;
                this.mainActiveIndex = index;
                this.regionId = this.items[index].id;
            },
            onItemClick(data) {
                this.townshipId = data.id;
            },
            modalSubmit() {
                this.townshipIdForTitle = this.townshipId
                this.regionIdForTitle = this.regionId

                this.changeSelectLoading = true;
                // this.getList(1)
                let queryObj = {
                    regionId: this.regionId,
                    townshipId: this.townshipId
                };
                this.townshipModalShow = false;

                this.changePathToGetList(queryObj);
            },
            //location选项 方法 end

            //catagroy选项 方法 start
            // 额外属性遍历写入方法
            onOtherProperty(id) {
                if (id == '' || id == null) return false;
                for (let i = 0; i < this.categoryJsons.length; i++) {
                    if ((id == this.categoryJsons[i].id) && this.categoryJsons[i].properties) {
                        this.otherPropertyJson = this.categoryJsons[i].properties;
                    } else {
                        if (this.categoryJsons[i].children.length > 0) {
                            for (let j = 0; j < this.categoryJsons[i].children.length; j++) {
                                if((id == this.categoryJsons[i].children[j].id)  && this.categoryJsons[i].children[j].properties){
                                    this.otherPropertyJson =  this.categoryJsons[i].children[j].properties;
                                }else {
                                    if(this.categoryJsons[i].children[j].children.length > 0){
                                        for(let k=0;k<this.categoryJsons[i].children[j].children.length;k++){
                                            if((id == this.categoryJsons[i].children[j].children[k].id)  && this.categoryJsons[i].children[j].children[k].properties){
                                                this.otherPropertyJson =  this.categoryJsons[i].children[j].children[k].properties;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
                // console.log(this.otherPropertyJson, 'this.otherPropertyJson')
            },
            getCategoryOnThisId(id){
                if (!id){
                    this.subCategoryJson = []
                    this.thirdCategoryJson = []
                    this.subCategoryShow = false
                    this.thirdCategoryShow = false
                    return false
                }
                let obj = this.categoryJson

                for (let i = 0; i < obj.length; i++) {
                    if (this.categoryId == obj[i].id) {
                        this.subCategoryJson = this.addAllSelect(obj[i]);
                        this.thirdCategoryJson = [];
                        this.subCategoryShow = true;
                        this.thirdCategoryShow = false;
                    } else {
                        if (obj[i].children) {
                            for (let j = 0; j < obj[i].children.length; j++) {
                                if (this.categoryId == obj[i].children[j].id) {
                                    if (obj[i].children[j].children && obj[i].children[j].children.length > 0) { // 有第三级时 显示第三级-- 此时选中的是第三级的All选项
                                        // this.subCategoryJson = []
                                        this.thirdCategoryJson = this.addAllSelect(obj[i].children[j])
                                        this.subCategoryJson = this.addAllSelect(obj[i]);
                                        // this.subCategoryShow = false;
                                        this.subCategoryShow = true;
                                        this.thirdCategoryShow = true;
                                    } else { // 没有第三级时显示第二级-- 此时选中的是第二级的当前选项
                                        this.thirdCategoryJson = [];
                                        this.subCategoryJson = this.addAllSelect(obj[i]);
                                        this.subCategoryShow = true;
                                        this.thirdCategoryShow = false;
                                    }

                                } else {
                                    if (obj[i].children[j].children) {
                                        for (let k = 0; k < obj[i].children[j].children.length; k++) {
                                            if (this.categoryId == obj[i].children[j].children[k].id) { // 显示第三级-- 此时选中的是第三级的当前选项
                                                // this.subCategoryJson = []
                                                this.thirdCategoryJson = this.addAllSelect(obj[i].children[j])
                                                this.subCategoryJson = this.addAllSelect(obj[i]);
                                                // this.subCategoryShow = false;
                                                this.subCategoryShow = true;
                                                this.thirdCategoryShow = true;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            },
            getCategoryText() {
                let obj = this.categoryJson
                for (let i = 0; i < obj.length; i++) {
                    if (this.categoryId == obj[i].id) {
                        return obj[i].name
                    } else {
                        if (obj[i].children) {
                            for (let j = 0; j < obj[i].children.length; j++) {
                                if (this.categoryId == obj[i].children[j].id) {
                                    // return obj[i].children[j].name
                                    return obj[i].name
                                } else {
                                    if (obj[i].children[j].children) {
                                        for (let k = 0; k < obj[i].children[j].children.length; k++) {
                                            if (this.categoryId == obj[i].children[j].children[k].id) {
                                                // return obj[i].children[j].children[k].name
                                                return obj[i].name
                                            }
                                        }
                                    }
                                }
                            }
                        }

                    }
                }
            },
            categoryBack(){
                this.categoryPop2Show = false;
                this.categoryShow = true;
            },
            translateCategoryJson(obj) {
              if (obj && obj.length > 0) {
                  // 第一层
                  for (let i = 0; i < obj.length; i++) {
                      for (let j = 0; j < this.categoryJsons.length; j++) {
                          if (obj[i].id == this.categoryJsons[j].id) {
                              obj[i].name = this.categoryJsons[j].name
                              if (obj[i].children && obj[i].children.length > 0) {
                                  // 第二层
                                  for (let k = 0; k < obj[i].children.length; k++) {
                                      for (let g = 0; g < this.categoryJsons[j].children.length; g++) {
                                          if (obj[i].children[k].id == this.categoryJsons[j].children[g].id) {
                                              obj[i].children[k].name = this.categoryJsons[j].children[g].name
                                              if (obj[i].children[k].children && obj[i].children[k].children.length > 0) {
                                                  // 第三层
                                                  for (let a = 0; a < obj[i].children[k].children.length; a++){
                                                      for (let b = 0; b < this.categoryJsons[j].children[g].children.length; b++) {
                                                          if (obj[i].children[k].children[a].id == this.categoryJsons[j].children[g].children[b].id){
                                                              obj[i].children[k].children[a].name = this.categoryJsons[j].children[g].children[b].name
                                                          }
                                                      }
                                                  }
                                              }
                                          }
                                      }
                                  }
                              }
                          }
                      }
                  }
              }
              return obj
            },
            getCategoryJson(type){
                // type == 0 点击事件； type == 1 自动加载事件
                if (this.categoryJson.length > 0){
                    if(type == 1) {
                        this.getCategoryOnThisId(this.categoryId)
                    }
                    return false;
                }

                if(!this.loading) {
                    this.categoryLoading1 = true;
                }
                let obj = ''
                getFirstCategoryData().then((res) => {
                    let data = res.data;
                    // 下拉菜单数据装载
                    if (data) {
                        if (data.errorID === 0) {
                            let allItem = {
                                "id": 'all',
                                "name": "All",
                                "text": "All",
                                "children": [],
                                "addAll": 1
                            }
                            let property = {
                                "id": 371,
                                "name": "Property",
                                "children": []
                            }
                            obj = JSON.parse(data.object)
                            if(this.$store.state.store.localLang == 'MM'){
                                allItem.name = 'အားလံုး'
                                allItem.text = 'အားလံုး'
                                property.name = 'အိမ္ျခံေျမ'
                                this.translateCategoryJson(obj)

                            } else if (this.$store.state.store.localLang == 'MMU'){
                                allItem.name = 'အားလုံး'
                                allItem.text = 'အားလုံး'
                                property.name = 'အိမ်ခြံမြေ'
                                this.translateCategoryJson(obj)
                            }
                            obj.unshift(allItem)
                            obj.push(property)
                            this.categoryJson = obj
                            if(type == 1) {
                                this.getCategoryOnThisId(this.categoryId)
                            }
                        } else {
                            this.$toast(data.message)
                        }
                        this.categoryLoading1 = false;
                    }

                }).catch((e) => {
                    console.log(e)
                    this.$toast('No internet, please try again')
                    this.categoryLoading1 = false;
                })
            },
            addAllSelect(item){
                // 为当前级数的category添加子选项All

                if (!item.children[0].addAll || item.children[0].addAll == 'undefined') {
                    let allItem = {
                        "id": item.id,
                        "level": item.level,
                        "name": "All",
                        "text": item.name,
                        "children": [],
                        "addAll": 1
                    }
                    if(this.$store.state.store.localLang == 'MM'){
                        allItem.name = 'အားလံုး'
                    } else if (this.$store.state.store.localLang == 'MMU'){
                        allItem.name = 'အားလုံး'
                    }
                    item.children.unshift(allItem)
                }
                return item.children
            },
            getFirstCategory() {
                // this.categoryJson = [];
                this.categoryShow = true;
                if (this.categoryJson.length > 0) return false; //如果有categoryJson 暂时不作ajax请求 -- 待以后有要求再作处理
                this.getCategoryJson();
            },
            getSecondCategory(item, type) {
                this.categoryPop2Json = [];
                this.categoryShow = false;
                if (item.children.length == 0) {
                    this.goToGetList (item);
                    // this.categoryPop2Show = false;
                } else {
                    this.category1 = item.name;

                    if (!item.children[0].addAll) {
                        let allItem = {
                            "id": item.id,
                            "level": item.level,
                            "name": "All",
                            "text": item.name,
                            "children": [],
                            "addAll": 1
                        }
                        if(this.$store.state.store.localLang == 'MM'){
                            allItem.name = 'အားလံုး'
                        } else if (this.$store.state.store.localLang == 'MMU'){
                            allItem.name = 'အားလုံး'
                        }
                        item.children.unshift(allItem)
                    }

                    this.categoryPop2Json = item.children;
                    this.categoryPop2Show = true;
                    // this.categoryPop3Show = false
                }
            },
            getThirdCategory(item, type) {
                this.categoryPop3Json = [];
                if (item.children.length == 0) {
                    // 没有子选项时去除下拉效果
                    this.activeNames = '1'
                    this.goToGetList (item);
                    this.categoryPop2Show = false
                } else {

                    if (!item.children[0].addAll) {
                        let allItem = {
                            "id": item.id,
                            "level": item.level,
                            "name": "All",
                            "text": item.name,
                            "children": [],
                            "addAll": 1
                        }
                        if(this.$store.state.store.localLang == 'MM'){
                            allItem.name = 'အားလံုး'
                        } else if (this.$store.state.store.localLang == 'MMU'){
                            allItem.name = 'အားလုံး'
                        }
                        item.children.unshift(allItem)
                    }

                    this.categoryPop3Json = item.children
                    // this.categoryPop2Show = false
                    // this.thirdCategoryShow = true
                }
            },
            goToGetList (item) {
                // 当前是property分类时作跳转
                if (item.id == 371) {  // all
                    location.href = 'https://bestproperty.com.mm/webPhone/index.html';
                    return;
                }

                if (item.id != 'all') {
                    this.categoryId = item.id;
                    if (item.addAll) {
                        this.category = item.text;
                    } else {
                        this.category = item.name;
                    }
                    this.onOtherProperty(item.id)
                } else {
                    this.categoryId = null
                    this.category = ''
                }

                this.changeSelectLoading = true;
                // this.getList(1)

                this.categoryShow = false;
                this.categoryPop2Show = false;
                this.getCategoryOnThisId(this.categoryId)
                //切换二级目录的时候应该重置filter中的数据
                this.resetFilter()
                // 重置路由参数中filter中的数据
                let tempObj = {
                    condition: null,
                    sort: 'create_datetime desc',
                    properties: [],
                    priceFloor:'',
                    priceCeiling:'',
                    brand:''
                }
                let queryObj = {
                    categoryId: this.categoryId,
                    category: this.category,
                    filter:JSON.stringify(tempObj)
                };
                //去掉filter激活状态
                this.hasFilter=false
                this.changePathToGetList(queryObj);
            },
            //catagroy选项 方法 end

            //filter选项 方法 start
            setSortBy(i) {
                this.sortBy = i.value
                // this.sortBySelectText = i.text
                this.filterActiveNames = ''
            },
            getSortBySelectText(t){
                let str = ''
                this.SortbyList.forEach((item) => {
                    if (item.value == t) {
                        str = item.text || ''
                    }
                })
                return str
            },
            getConditionSelectText(t){
                let str = ''
                this.conditionList.forEach((item) => {
                    if (item.value == t) {
                        str = item.text || ''
                    }
                })
                return str
            },
            setCondition(i) {
                this.itemCondition = i.value
                this.conditionSelectText = i.text
                this.filterActiveNames = ''
            },
            propertyText (array, item){
                let str = ''
                let arr = array || []
                for(let i = 0; i < arr.length; i++) {
                    for(let j = 0; j < item.values.length; j++) {
                        if (arr[i] == item.values[j].id) {
                            if (str == '') {
                                str = item.values[j].text
                            } else {
                                str = str + '  ' + '|' + '  ' + item.values[j].text
                            }
                        }
                    }
                }
                return str
            },
            showPropertyType(item, index){
                this.property = ''

                // 子属性排序
                if (item.values) {
                    item.values = item.values.sort((a,b)=>a.id-b.id)
                }

                this.property = item //用于 dom 渲染
                this.countType = index //用于 toggle方法中给 properties 赋值
                this.resultItems = this.properties[index] || [] //用于 dom --> checkBox 渲染
                this.propertyShow = true
            },
            toggle(index) {
                this.$refs.checkboxes[index].toggle();
                this.properties[this.countType] = this.resultItems
            },
            setPriceError(val, type) {
                if (val.length == 0) return false
                if (type == 1) {
                    let reg = /^(0|[1-9][0-9]*)$/
                    if (val.match(reg)) {
                        this.inputErrorMax = false
                    } else {
                        this.inputErrorMax = true
                    }
                } else if (type == 0) {
                    let reg = /^(0|[1-9][0-9]*)$/
                    if (val.match(reg)) {
                        this.inputErrorMin = false
                    } else {
                        this.inputErrorMin = true
                    }
                }

            },
            resetProperty() {
                this.resultItems = []
                // this.properties.splice(this.countType, 1)
                this.properties[this.countType] = []
            },
            applyProperty() {
                this.propertyShow = false
                this.propertiesSub[this.countType] = this.resultItems
            },
            applyFilter() {
                if (this.priceMinValue && !this.priceMinValue.match(/^(0|[1-9][0-9]*)$/)) {
                    this.$toast('error submit~')
                    return false
                } else {
                    if (this.filter.priceType == 2) {
                        if (this.priceMinValue != '') {
                            this.filter.priceFloor = Number(this.priceMinValue) * 100000
                        } else {
                            this.filter.priceFloor = this.priceMinValue
                        }
                    } else {
                        this.filter.priceFloor = this.priceMinValue
                    }
                }
                if (this.priceMaxValue && !this.priceMaxValue.match(/^(0|[1-9][0-9]*)$/)) {
                    this.$toast('error submit~')
                    return false
                } else {
                    if (this.filter.priceType == 2) {
                        if (this.priceMaxValue != '') {
                            this.filter.priceCeiling = Number(this.priceMaxValue) * 100000
                        } else {
                            this.filter.priceCeiling = this.priceMaxValue
                        }
                    } else {
                        this.filter.priceCeiling = this.priceMaxValue
                    }
                }
                this.filter.brand = this.brandSubmit
                this.filter.sort = this.sortBy
                this.filter.condition = this.itemCondition
                this.filter.properties = this.propertiesSub

                this.changeSelectLoading = true;
                // this.getList(1)
                this.filterShow = false

                let queryObj = {
                    filter: JSON.stringify(this.filter),
                };

                this.changePathToGetList(queryObj);
            },
            resetFilter() {
                this.sortBy = 'create_datetime desc'
                this.brandSubmit = ''
                this.itemCondition = null
                this.priceMinValue = null
                this.priceMaxValue = null
                // this.sortBySelectText = this.SortbyList[0].text
                this.conditionSelectText = null

                this.resultItems = []
                this.properties = []
                this.propertiesSub = []

                this.filter.sort = 'create_datetime desc'
                this.filter.condition = null
                this.filter.properties = []
                this.filter.priceFloor = null
                this.filter.priceCeiling = null
                this.filter.brand = ''

            },
            //filter选项 方法 end

            goToDetail(id) {
                this.$router.push({
                    path:'/buydetail',
                    query:{
                        id: id
                    }
                })
            },
            gotToSell() {
                this.$router.push({
                    path:'/category'
                })
            },
            regexNum (v,len,split) {
                split = split || ',', len = Math.abs((+len) % 20 || 2)
                v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
                v = parseFloat(v) + ''
                return v.replace(/\d+/, function (v) {
                        var lit = v.length % 3 == 0
                        var index = lit ? v.length - 3 : -1
                        return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
                            return k + ((l == index && lit) ? '' : split)
                        }).split('').reverse().join('')
                    }
                )
            },
            getDateDiff (dateTimeStamp) {
                if (!dateTimeStamp) return
                let minute = 1000 * 60
                let hour = minute * 60
                let day = hour * 24
                let month = day * 30
                let year = day * 365
                let now = new Date().getTime()
                let diffValue = now - dateTimeStamp
                if (diffValue < 0) return
                let yearC =diffValue/year
                let monthC =diffValue/month
                let weekC =diffValue/(7*day)
                let dayC =diffValue/day
                let hourC =diffValue/hour
                let minC =diffValue/minute
                let result = ''
                if(yearC>=1){
                    if (parseInt(yearC)>1) {
                        result="" + parseInt(yearC) + " years ago"
                    } else {
                        result="" + parseInt(yearC) + " year ago"
                    }
                } else if(monthC>=1) {
                    if (parseInt(monthC)>1) {
                        result="" + parseInt(monthC) + " months ago"
                    } else {
                        result="" + parseInt(monthC) + " month ago"
                    }
                } else if(weekC>=1) {
                    if (parseInt(weekC)>1) {
                        result="" + parseInt(weekC) + " weeks ago"
                    } else {
                        result="" + parseInt(weekC) + " week ago"
                    }
                } else if(dayC>=1) {
                    if (parseInt(dayC)>1) {
                        result="" + parseInt(dayC) + " days ago"
                    } else {
                        result="" + parseInt(dayC) + " day ago"
                    }
                } else if(hourC>=1) {
                    if (parseInt(hourC)>1) {
                        result="" + parseInt(hourC) + " hours ago"
                    } else {
                        result="" + parseInt(hourC) + " hour ago"
                    }
                } else if(minC>=1) {
                    if (parseInt(minC)>1) {
                        result="" + parseInt(minC) + " minutes ago"
                    } else {
                        result="" + parseInt(minC) + " minute ago"
                    }
                }
                return result;
            },
            getWidthAndHeight (e, i) {
                let img = new Image();
                img.src = e.cover
                img.onload = () =>{
                    // let str = 'width: ' + img.width + ' ; ' + 'height: ' + img.height + ' ; ' + 'loaded'
                    // console.log(str, 'str')
                    if(img.width>0 || img.height>0){
                        let obj = {
                            wth : null
                        }
                        if (Number(img.width) > Number(img.height)){
                            obj.wth = 1
                        } else {
                            obj.wth = 0
                        }
                        if(this.tableData[i]) {
                            Object.assign(this.tableData[i], obj)
                        }
                    }
                };

            },
            getList(pageNum) {
                if (pageNum == 1) {
                    this.pageData.pageNum = 1;
                    this.tableData = [];
                }
                // console.log('loading...')

                let searchForm = {};

                // 搜索子段处理
                if(this.regionId){
                    searchForm.regionId = this.regionId
                }
                if(this.townshipId){
                    searchForm.townshipId = this.townshipId
                }

                if(this.categoryId) {
                    searchForm.categoryId = this.categoryId
                }

                if(this.filter.sort){
                    searchForm.sort = this.filter.sort
                }
                if(this.filter.condition != null && this.filter.condition != 2){
                    searchForm.condition = this.filter.condition
                }
                if(this.filter.priceFloor){
                    searchForm.priceFloor = this.filter.priceFloor
                }
                if(this.filter.priceCeiling){
                    searchForm.priceCeiling = this.filter.priceCeiling
                }
                if(this.filter.properties.length > 0){
                    let arr = this.filter.properties.toString().split(",");//多维数组转一维数组
                    for(let i = 0; i < arr.length; i++) {
                        if(arr[i] == undefined || arr[i] == "") {
                            arr.splice(i,1);
                            i = i - 1; //补位，
                        }
                    }
                    arr = arr.map((item) => {

                        return +item;// 数组中的字符串转换成数字

                    });
                    searchForm.propertyValues = arr
                }

                // search 新增
                if (this.searchTerm && this.searchTerm != '') {
                    searchForm.searchTerm = this.translateStringZTU(this.searchTerm)
                }
                if (this.user && this.user != '') {
                    searchForm.user = this.user
                }
                if (this.brand && this.brand != '') {
                    searchForm.brand = this.brand // 详情页跳转传来的brand，正常情况为Unicode,无需翻译处理
                } else if (this.filter.brand && this.filter.brand != '') {
                    searchForm.brand = this.translateStringZTU(this.filter.brand)
                }
                // console.log(searchForm, 'searchForm')

                searchForm.pageNum = this.pageData.pageNum
                searchForm.pageSize = this.pageData.pageSize
                let params = Qs.stringify(searchForm, {arrayFormat: 'repeat'})
                // return false
                searchBuyList(params).then((res) => {
                    if (res.data.errorID == 0) {
                        // wth判断列表图片宽高 start
                        let dataList = res.data.object.list || []
                        for (let i=0; i < dataList.length; i++) {
                            let obj = {
                                wth : null
                            }
                            Object.assign(dataList[i], obj)
                        }
                        // wth判断列表图片宽高 start

                        // // 刷新列表 or 加载更多
                        if (this.pageData.pageNum == 1) {
                            window.scrollTo(0, 0)
                            this.tableData = dataList
                            this.finished = false;
                        } else {
                            this.tableData = this.tableData.concat(dataList)
                        }
                        // console.log(this.tableData, 'this.tableData')
                        // // 分页信息配置
                        this.pageInfo.totalPages = res.data.object.pages
                        this.pageInfo.totalCount = res.data.object.total
                        this.pageData.pageNum = this.pageData.pageNum + 1
                        if (this.pageData.pageNum > this.pageInfo.totalPages) {
                            this.finished = true
                        }
                        this.loading = false
                        this.isLoading = false;
                        this.changeSelectLoading = false;
                    } else {
                        this.$toast(res.data.message)
                        this.finished = true
                        this.loading = false
                        this.isLoading = false;
                        this.changeSelectLoading = false;
                    }

                }).catch((e) => {
                    console.log(e)
                    this.$toast('No internet, please try again')
                    this.finished = true
                    this.loading = false
                    this.isLoading = false;
                    this.changeSelectLoading = false;
                })
            },
            onRefresh(){
                this.getList(1)
            },
            toSearch() {
                this.$router.push({
                    path:'/search/search',
                    query:this.$route.query
                })
            },
            translateString(str) {
                if (!str) return ''
                return this.$translateLang(str, 'unicodeTozawgyi');
                // if(this.$store.state.store.localLang == 'MM'){
                //     return this.$translateLang(str,'unicodeTozawgyi');
                // }else {
                //     return str;
                // }
            },
            translateStringZTU(str) {
                if (!str) return ''
                return this.$translateLang(str, 'zawgyiTounicode');
                // if(this.$store.state.store.localLang == 'MM'){
                //     return this.$translateLang(str,'zawgyiTounicode');
                // }else {
                //     return str;
                // }
            },
            // handleScroll() {
            //     this.$nextTick(()=>{
            //         let abc = this.$refs.headerBox.offsetHeight
            //         let top = document.documentElement.scrollTop;
            //         console.log(abc,'abc')
            //         console.log(top,'top')
            //         if (top > 5) {
            //             let opacity = abc / top;
            //             console.log(opacity,'opacity')
            //             opacity = opacity < 1 ? 0 :opacity;
            //             this.opacityStyle = {opacity};
            //         } else {
            //
            //         }
            //         console.log(abc,'abc')
            //     })
            // }// 滚动title渐隐效果
        },
        mounted() {
            this.initDataToGetList();
            this.getCategoryJson(1);
            this.getRegionType();
            // window.addEventListener('scroll', this.handleScroll);// 滚动title渐隐效果
            window.onresize = () => {
                return (() => {
                    window.screenHeight= document.body.clientHeight
                    this.screenHeight= window.screenHeight
                })()
            }

            window.scroll(0, 0)

        },
        beforeRouteLeave (to, from, next) {

            if (to.path == '/buydetail') {
                from.meta['needFresh'] = false;
            }else{
                from.meta['needFresh'] = true;
            }

            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            // console.log(to,'to')
            let leave = true;
            if (this.townshipModalShow) {
                this.townshipModalShow = false
                leave = false
            }
            if (this.categoryShow) {
                this.categoryShow = false
                leave = false
            }
            if (this.categoryPop2Show) {
                this.categoryPop2Show = false
                this.categoryShow = true
                leave = false
            }
            if (this.filterShow) {
                this.filterShow = false
                leave = false
            }
            if (this.propertyShow) {
                this.propertyShow = false
                this.filterShow = true
                leave = false
            }
            if (leave) {
                next()
            } else {
                next(false)
            }
        },
        beforeRouteUpdate (to, from, next) {
            // 导航离开该组件的对应路由时调用
            // 可以访问组件实例 `this`
            // console.log(to,'to')
            let leave = true;
            if (this.townshipModalShow) {
                this.townshipModalShow = false
                leave = false
            }
            if (this.categoryShow) {
                this.categoryShow = false
                leave = false
            }
            if (this.categoryPop2Show) {
                this.categoryPop2Show = false
                this.categoryShow = true
                leave = false
            }
            if (this.filterShow) {
                this.filterShow = false
                leave = false
            }
            if (this.propertyShow) {
                this.propertyShow = false
                this.filterShow = true
                leave = false
            }
            if (leave) {
                next()
            } else {
                next(false)
            }
        },
        watch: {
            screenHeight (val) {
                if(this.originHeight != val) {
                    this.isOriginHei = false;
                }else{
                    this.isOriginHei = true;
                }
            },
            '$route' (to, from) {
                // 路由参数发生变化时
                if (this.$route) {
                    if(!(to.path == from.path)){
                      return false;
                    }
                    this.initDataToGetList();
                    this.getCategoryJson(1);// 此处不加这句的话返回时选中的样式有问题

                    this.finished = true;
                    this.changeSelectLoading = true;
                    this.tableData = [];
                    this.pageData.pageNum = 1;
                    this.pageInfo.totalCount = 0;
                    this.pageInfo.totalPages = 0;
                    this.getList(1)
                }
            },
        },

        activated() {  //此方法在页面缓存时会被调用，根据路由元信息决定是否重新加载数据。不加载则是上次填写完的数据
            if (this.$route.meta['needFresh']) {  // 当前是否需要刷新

                Object.assign(this.$data, this.$options.data())  // 整个页面数据重置
                // 将mounted钩子函数中执行的操作再执行一遍
                this.initDataToGetList();
                this.getCategoryJson(1);
                this.getRegionType();

                window.onresize = () => {
                    return (() => {
                        window.screenHeight= document.body.clientHeight
                        this.screenHeight= window.screenHeight
                    })()
                }

                window.scroll(0, 0)
            }
        }
    };
</script>
<style>
    .buy-list .van-nav-bar{
        background-color: #FF9900;
    }
    .buy-list .van-nav-bar .van-icon{
        /*color: #fff;*/
        margin-right: 15px;
        font-size: 18px;
    }
    .buy-list .van-nav-bar .van-icon:last-child{
        margin-right: 4px;
    }
    .buy-list .van-popup--left{
        height: 100%;
        width: 80%;
    }
    .buy-list .van-nav-bar .van-icon.van-icon-search{
        /*color: #fff;*/
        /*margin-right: 0;*/
    }
    .buy-list .van-nav-bar .van-field__control{
        height: 24px;
    }
    .buy-list .van-search .van-cell{
        border-radius: 0;
    }
    .buy-list .van-list__loading{
        width: 100%;
        /*border-top: 1px solid #F2F2F2;*/
    }
    .buy-list .van-nav-bar.filter-title .van-icon{
        color: #BDBDBD;
    }
    .buy-list .property-cell .van-cell__value {
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #db3743;
    }
    .location-tree-select.van-tree-select{
        height: 80%!important;
    }
    .location-tree-select.van-tree-select .van-tree-select__content{
        height: 100%!important;
    }
    .buy-list .van-nav-bar__title{
        max-width: 100%;
    }
    .child-category-box .van-button--small{
        padding: 0 25px;
        margin-left: 6px;
    }
    .buy-list .text-active{
        color: #f90;
    }
    .buy-list .modal .van-field__body{
        height: 100%;
    }
    .buy-list .van-collapse-item.active .van-cell__value, .buy-list .category-sec .van-collapse-item.active .van-cell__title{
        color: #f90;
    }
    .buy-list .van-collapse-item.active .van-button.active{
        border-color: #f90;
        background: #f90;
        color: #fff;
    }
    .buy-list .price-box .van-button--small {
        height: 29px;
        margin: 0 auto;
        border: 1px solid #f2f2f2;
        min-width: 50px;
    }
    .buy-list .modal .van-tree-select__nitem--active, .buy-list .modal .van-tree-select__nitem:active{
        background: #f90;
        color: #fff;
    }
    .buy-list .modal .van-tree-select__item--active, .buy-list .modal .van-tree-select__item:active{
        color: #f90;
    }
</style>
<style scoped>
    .main-explore {
        position: relative;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align:center;
        flex-wrap: wrap;
        padding: 0;
        margin:0;
        /*margin-bottom: 14px;*/
        padding-right: 4%;
    }
    .main-explore.buy-list-explore .explore-item{
        display: block;
        padding: 14px 0 0;
        margin-left: 4%;
        width: 46%;
        text-decoration: none;
        color: #000;
        /*margin-right: 8%;*/
        /*border-bottom: 1px solid #F2F2F2;*/
        /*border-right: 1px solid #F2F2F2;*/
    }
    /*最后一个child是div--加载loading*/
    /*.main-explore .explore-item.one:last-child, .main-explore .explore-item.two:last-child{*/
        /*border-bottom: none;*/
    /*}*/
    .main-explore .explore-item.one:nth-last-child(2), .main-explore .explore-item.two:nth-last-child(2){
        border-bottom: none;
        margin-bottom: 14px;
    }
    .main-explore .explore-item.two:nth-last-child(3){
        border-bottom: none;
        margin-bottom: 14px;
    }
    .main-explore .explore-item:nth-child(2n){
        margin-right: 0;
        border-right: 0;
    }
    .main-explore .explore-item .explore-item-icon{
        width: 100%;
        /*height: 135px;*/
        /*margin: 0 auto 5px;*/
        /*border: 1px solid #eee;*/
        align-items: center;
        display: flex;
        background: #f0f0f0;
        position: relative;
        z-index: 0;
        height: 0;
        padding: 0 0 100%;
        overflow: hidden;
        border-radius: 6px;
    }
    .main-explore .explore-item .explore-item-icon::before{
        content: "Tolymoly";
        position: absolute;
        top: 50%;
        bottom: 0;
        right: 0;
        left: 0;
        text-align: center;
        background: #f0f0f0;
        font-size: 1.5rem;
        font-weight: 700;
        color: #c0bfbf;
        /*line-height: 135px;*/
        z-index: -1;
        margin-top: -12px;
    }
    .main-explore .explore-item > *{
        display: block;
        margin: 0 auto;
    }
    .main-explore .explore-item-icon img {
        /*max-width:100%;*/
        /*max-height:100%;*/
        /*display: block;*/
        /*margin: 0 auto;*/
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
    }
    .main-explore .explore-item-icon img.width-max{
        width: auto;
        left: 50%;
        right: auto;
        height: 100%;
        transform: translate(-50%);
    }
    .main-explore .explore-item-icon img.height-max{
        top: 50%;
        transform: translateY(-50%);
    }
    .main-explore .explore-item .explore-item-label{
        /*color: inherit;*/
        font-size: 14px;
        line-height: 160%;
        margin-top: 4px;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;

        /*font-size: 12px;*/
        /*font-family: Bitter,sans-serif;*/
        color: #000;
    }
    .main-explore .explore-item .explore-item-label.price{
        /*color: #DB3743;*/
        /*font-size: 16px;*/
        /*font-weight: 600;*/
        font-size: 14px;
        color: #4c4c4c;
    }
    .main-explore .explore-item .explore-item-label.dates{
        color: #A1A1A1;
    }
    .to-sell{
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 1000;
        display: block;
        width: 60px;
        height: 60px;
        /*line-height: 60px;*/
        border-radius: 30px;
        background-color: #f90;
        text-align: center;
        font-size: 24px;
        color: #fff;
    }
    .tabbar-box{
        padding: 5px 0;
        border-bottom: 1px solid #D7D7D7;
        /*top: 46px;*/
        /*left: 0;*/
        width: 100%;
        /*position: fixed;*/
        /*z-index: 1;*/
        background: #fff;
    }
    .tabbar-box .tabbar{
        position: relative;
        padding: 2px 20px 2px 10px;
        line-height: 1.5;
        border-right: 1px solid #F2F2F2;
        text-align: center;
        font-size: 14px;
        height: 25px;
    }
    .san-box{
        position: absolute;
        right: 9px;
        top: 10px;
        width: 0;
        height: 0;
        border-top: 5px solid #666666;
        border-right: 5px solid transparent;
        border-left: 5px solid transparent;
        display: inline-block;
    }
    .no-more{
        border-top: 1px solid #F2F2F2;
        height: 50px;
        line-height: 50px;
        color: #909399;
        text-align: center;
    }
    .modal {
        width: 100%;
        height: 100%;
    }
    .submit-btn {
        width: 90%;
        border-top: 1px solid #F2F2F2;
        position: fixed;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: 10px;
    }

    .submit-btn .btn {
        border: 1px solid #FF9A03;
        color: #FF9A03;
    }
    .filter-right-title {
        float: right;
        color: rgb(219, 55, 67);
        padding-right: 10px;
    }
    .filter-child-list{
        width: 100%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 10px 15px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        line-height: 24px;
        position: relative;
        background-color: #fff;
        color: #333;
        font-size: 14px;
        overflow: hidden;
        /*border-bottom: 1px solid #e5e5e5;*/
    }
    .activeClass {
        color: #db3743;
        /*color: #f60;*/
    }
    .border-t{
        border-top: 1px solid #f2f2f2;
    }
    .price-box{
        /*border-top: 1px solid #f2f2f2;*/
        display: flex;
        padding: 7.5px 15px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        font-size: 14px;
        overflow: hidden;
        color: #333;
    }
    .price-box .price-input{
        width: 26%;
        border: 1px solid #F2F2F2;
        height: 24px;
        line-height: 1;
        font-size: 12px;
        color: #333;
        text-indent: 10px;
    }
    .price-box .price-input.text-danger{
        border: 1px solid #fa5555;
    }
    .buy-list .filter-title{
        background-color: #F2F2F2;
        color:#333;
    }
    .filter-btn {
        position: fixed;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: 10px;
        display: flex;
        padding: 0 15px;
        font-size: 14px;
        text-align: center;
    }
    .filter-btn.popup-filter-btn{
        /*position: static;*/
        /*margin: 45px 0 10px*/
        z-index: 9999;
    }
    .filter-btn .reset-btn {
        width: 20%;
        border:1px solid rgb(255, 153, 0);
        border-radius: 5px;
        /*padding: 8px 0;*/
        margin-right: 10px;
        flex: 1;
        color: rgb(255, 153, 0);
    }
    .apply-btn {
        border:1px solid rgb(255, 153, 0);
        background: rgb(255, 153, 0);
        border-radius: 5px;
        /*padding: 8px 0;*/
        color: #fff;
        flex: 2;
    }
    .title-text {
        width: 90%;
        display: inline-block;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .font-color{
        color: rgb(255, 153, 0);
    }
    .child-category-box{
        /*border-bottom: 1px solid #d7d7d7;*/
        /*top: 82px;*/
        /*left: 0;*/
        width: 100%;
        /*position: fixed;*/
        /*z-index: 1;*/
        background: #ECEDF1;
    }
    .child-category-box.third{
        background: #fff;
    }
    .child-box{
        overflow: hidden;
        overflow-x: auto;
        white-space: nowrap;
        padding: 5px 0;
    }
    .child-category-box .cate-btn{
        padding: 0 25px;
        margin-left: 6px;
        height: 30px;
        min-width: 60px;
        font-size: 12px;
        line-height: 28px;
        position: relative;
        display: inline-block;
        border-radius: 3px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        text-align: center;
        -webkit-appearance: none;
        color: #333;
        background-color: #fff;
        border: 1px solid rgb(102, 102, 102);
    }
    .child-category-box .cate-btn.active{
        background-color: #f90;
        border: 1px solid #f90;
        color: #fff;
    }
    .child-category-box .cate-btn:last-child {
        margin-right: 6px;
    }
    .child-category-box.third .cate-btn{
        color: rgb(102, 102, 102);
        background-color: #ECEDF1;
        border: 1px solid #ECEDF1;
    }
    .child-category-box.third .cate-btn.active{
        border: 1px solid rgb(102, 102, 102);
        background: #CDCED2;
    }
    .list-title-bar{
        /*position: fixed;*/
        /*top: 46px;*/
        /*left: 0;*/
        width: 100%;
        /*z-index: 1;*/
    }
    @media (max-width:375px) and (min-width:321px) {
        .swiper-banner {
            height: 192px;
        }
        .main-explore .explore-item .explore-item-icon{
            /*height: 155px;*/
        }
        .main-explore .explore-item .explore-item-icon::before{
            /*line-height: 155px;*/
        }
    }
    @media (max-width:1080px) and (min-width:376px) {
        .swiper-banner {
            height: 214px;
        }
        .main-explore .explore-item .explore-item-icon{
            /*height: 173px;*/
        }
        .main-explore .explore-item .explore-item-icon::before{
            /*line-height: 173px;*/
        }
    }
</style>
